<template>
  <div class="app">
    <!-- header start -->
    <header>
      <div class="banner">
        <img src="./assets/banner.jpg" alt="banner">
      </div>
      <Header />
    </header>
    <!-- header end -->

    <!--  userInfo start -->
    <section>
      <UserInfo />
    </section>
    <!--  userInfo end -->

    <!-- works start -->
    <section>
      <Works />
    </section>
    <!-- works end -->

    <!-- download btn start -->
    <footer>
      <a href="javascript:;" class="download-btn">下载青微在线 APP，为选手点赞</a>
    </footer>
    <!-- download btn end -->

  </div>
</template>

<script>
import Header from './components/Header.vue'
import UserInfo from './components/UserInfo.vue'
import Works from './components/Works.vue'

export default {
  name: 'app',
  components: {
    Header,
    UserInfo,
    Works
  }
}
</script>

<style lang="stylus">
// common css
.app
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  color #2c3e50
  font-size 12px
  overflow hidden

p {
  margin 0
  padding 0
}

h1, h2, h3 {
  margin 0
  padding 0
}

a {
  text-decoration none
}

ul, li {
  margin 0
  padding 0
}

li {
  list-style none
}

// app.vue css

.banner {
  width: 100%;
  height: 200px;

  img {
    width 100%;
    height 100%;
  }
}

.download-btn {
  display flex
  align-items center
  justify-content center
  position fixed
  bottom 39px
  left 0
  right 0
  margin 0 20px
  height 56px
  font-size 16px
  color #fff
  text-align center
  background linear-gradient(to bottom, rgb(255, 189,93), rgb(252, 130, 37))

  &::before {
    content: ""
    display inline-block
    width 24px
    height 100%
    text-align center
    background url('./assets/download.svg') no-repeat center;
    background-size 24px
    margin-right 8px
  }
}

// 兼容 iphoneX

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) or (top: constant(safe-area-inset-top)) or (top: env(safe-area-inset-top)) {
  body {
    padding-bottom env(safe-area-inset-bottom)
    padding-top env(safe-area-inset-top)
    padding-bottom constant(safe-area-inset-bottom)
    padding-top constant(safe-area-inset-top)
  }
}

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .download-btn {
    margin-bottom: constant(safe-area-inset-bottom)
    margin-bottom: env(safe-area-inset-bottom)
  }
}

</style>
